<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>训练项目列表</title>
    <script src="../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../res/layui/layui.js"></script>
    <script src="../../res/js/Tools.js"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <script src="../../res/js/base.js"></script>
</head>
<body>
<form class="layui-form layui-form-pane" action="">
    <div class="demoTable">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="exp" id="exp"
                   autocomplete="off" placeholder="训练项目名称">
        </div>

        <div class="layui-inline">
            <select name="athleteId" id="athleteId" lay-verify="required" lay-search="">
                <option value="">请选择或输入运动员</option>
            </select>
        </div>

        <div class="layui-inline">
            <select name="coachId" id="coachId" lay-verify="required" lay-search="">
                <option value="">请选择或输入教练员</option>
            </select>
        </div>

        <div class="layui-inline">
            <input class="layui-input" name="startTime" id="startTime"
                   autocomplete="off" lay-verify="date" placeholder="开始时间">
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="endTime" id="endTime"
                   autocomplete="off" lay-verify="date" placeholder="结束时间">
        </div>
        <div class="layui-inline">
            <input type="button" id="seachTable"
                   class="layui-btn layui-btn-normal" value="搜索" />
        </div>
    </div>
</form>


<table id="demo" lay-filter="test"></table>

<script>
    var table2 = null;
    var form = null;
    layui.use(['table','laydate','form'], function() {
        var table = layui.table
            , laydate = layui.laydate;

        form = layui.form
        //日期
        laydate.render({
            elem: '#startTime'
        });
        laydate.render({
            elem: '#endTime'
        });


        getselect();

        //第一个实例
        table2 = table.render({
            elem : '#demo',
            height : 550,
            toolbar : '#toolbarDemo',
            url : getRootPath() + 'AtsEmpCoachAthleteController/selectAll' //数据接口
            ,
            page : true //开启分页
            ,
            cols : [ [ //表头
                {
                    type : 'checkbox',
                    fixed : 'left'
                }, {
                    field : 'exp',
                    title : '训练项目',
                    width : 150
                }, {
                    field : 'coachName',
                    title : '教练员',
                    width : 200
                }, {
                    field : 'athleteName',
                    title : '运动员',
                    width : 200
                }, {
                    field : 'startTime',
                    title : '起始时间',
                    width : 200
                }, {
                    field : 'endTime',
                    title : '结束时间',
                    width : 200
                }, {
                    field : 'action',
                    title : '操作',
                    width : 120,
                    toolbar : "#barDemo"
                } ] ]
        });

        //监听工具条
        table.on('tool(test)', function(obj) {

            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    //删除数据在这里可以使用Ajax异步  就和平常使用一样简单
                    $.post(getRootPath() + "AtsEmpCoachAthleteController/delete", {
                        id : data.caId
                    }, function(ret) {

                        if (ret.num == 1) {
                            layer.msg(ret.msg, {
                                icon : 1,
                                time : 1500
                            }, function() {
                                table2.reload();
                                //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            });
                        } else {
                            layer.msg(ret.msg, {
                                icon : 2,
                                time : 1500
                            });
                        }
                    }, "json");
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type : 2,
                    title : '训练项目编辑',
                    shadeClose : true,
                    shade : 0.8,
                    area : [ '700px', '90%' ],
                    content : 'atsEmpCoachAthlete.html?id=' + data.caId, //iframe的url
                    end : function() {
                    }
                });
            }
        });

        $("#close").click(function() {
            $("#divImg").hide(2000);
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'deleteAllBut':
                    layer.confirm('您真的要删除吗', function(index) {
                        var data = checkStatus.data;
                        var ids = "";
                        $.each(data, function(index, item) {
                            ids += item.caId + ",";
                        });

                        var url = getRootPath() + "AtsEmpCoachAthleteController/deleteAll";
                        var datas = {
                            ids : ids
                        };
                        $.post(url, datas, function(obj) {
                            layer.msg(obj.msg);
                            table2.reload();//刷新表格
                        }, "json");
                    });
                    break;
                case 'addBut':
                    layer.open({
                        type : 2,
                        title : '训练项目编辑',
                        shadeClose : true,
                        shade : 0.8,
                        area : [ '700px', '90%' ],
                        content : 'atsEmpCoachAthlete.html', //iframe的url
                        end : function() {
                        }
                    });
                    break;
            }
        });
    });



    $("#seachTable").on("click",function(){
        //执行重载
        //带条件查询
        table2.reload({
            url: getRootPath() + 'AtsEmpCoachAthleteController/selectAll',
            where: {
                exp: $("#exp").val(),
                coachId:$("#coachId").val(),
                athleteId:$("#athleteId").val(),
                startTime:$("#startTime").val(),
                endTime:$("#endTime").val()
            },
            page: { curr: 1 }
        });
    })


    function getselect() {
        var url = getRootPath() + "AtsEmpAthleteController/findAll";
        var data = null;

        $.post(url,data,function (obj) {
            $.each(obj,function (i,item) {
                $("#athleteId").append("<option value='"+item.athleteId+"'>"+item.athleteName+"</option>");
            });
            form.render();
        },"json");


        var url = getRootPath() + "AtsEmpCoachController/findAll";
        var data = null;
        $.post(url,data,function (obj) {
            $.each(obj,function (i,item) {
                $("#coachId").append("<option value='"+item.coachId+"'>"+item.coachName+"</option>");
            });
            form.render();
        },"json");
    }
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="deleteAllBut">删除选中数据</button>
        <button class="layui-btn layui-btn-sm"  lay-event="addBut">增加数据</button>
    </div>
</script>
</body>
</html>